<template>
	<view style="margin: 7px 20px;">
		<view class="v-title">
			<text class="v-title-text">{{data.title}}</text>
		</view>
		<view class="author" style="margin: 7px 0 -3 0px;">
			<text style="color:#999999;font-size:12px">来源：{{data.author}}</text>
		</view>
		<view class="time" style="margin: -3px 0 7px 0;">
			<text style="color:#999999;font-size:12px">{{data.time}}</text>
		</view>
		<view class="cover" style="width: 100%;margin: 10px 0;">
			<u--image :showLoading="true" :src="data.coverpic" width="100%" height="180px" radius="5">
			</u--image>
		</view>
		<view class="content">
			<mp-html :content="data.content" />
		</view>
		<view class="count" style="display: grid;grid-template-columns: 1fr 1fr;margin: 10px 0 20px 0;">
			<view class="count-border"
				style="background-color: #e0e0e05e;height: 40px;width: 150px;margin-left:10px;position: relative;">
				<text
					style="color:#888888;position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);width: 100%;">阅读：{{data.readCount}}</text>
			</view>
			<view class="star-border"
				style="background-color: #e0e0e05e;height: 40px;width: 150px;position: relative;margin-left:10px"
				@tap="starClick">
				<text v-if="!isStar"
					style="color:#888888;position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);width: 60%;">点赞：{{data.star}}</text>
				<text v-if="isStar"
					style="color:#888888;position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);width: 60%;">点赞：{{data.star+1}}</text>
				<view style="margin-left: 15px;">
					<u-icon v-if="!isStar" name="thumb-up" color="#888888" size="22" top="9" style="margin-left: 15px;">
					</u-icon>
					<u-icon v-if="isStar" name="thumb-up-fill" color="#c65349" size="22" top="9"></u-icon>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<view class="comments" style="height: auto;">
			<view class="title" style="border-left: 7px solid #76BF9D;padding: 0 10px;margin-bottom: 10px;">
				<text style="font-family: serif;font-size:16px;">最新评论</text>
			</view>
			<view class="li">
				<ul>
					<li v-for="i in commentList" class="commentLi"
						style="height: auto;border-bottom:1px solid #edeef2;padding: 15px 0;">
						<view style="display: grid;grid-template-columns: 50px auto;width: 100%;">
							<view class="left" style="padding: 10px 0;">
								<u--image :src="i.avatar" shape="circle" width="36px" height="36px"></u--image>
							</view>
							<view class="right" style="width: 100%;display:grid;grid-template-rows: 1fr auto 1fr;">
								<view class="first"
									style="display: grid;grid-template-columns: 5fr 1fr;margin-bottom: 5px;">
									<text style="color: #cc8e35;">{{i.author}}</text>
									<view>
										<u-icon name="thumb-up-fill" color="#d1d0d8" size="22"
											style="margin-left: -10px;">
										</u-icon>
									</view>
								</view>
								<view class="second">
									<text style="font-family: serif;font-size: 18px;">{{i.content}}</text>
								</view>
								<view class="third">
									<text style="color: #c1bfc2;font-size:12px;">{{i.time}}</text>
									<text v-if="i.author == '猪八戒'" class="delete" @tap="deleteComment(i.id)"
										style="font-size:14px;margin-left: 10px;color: #888888;">删除</text>
								</view>
							</view>
						</view>
					</li>
				</ul>
			</view>
			<view class="white" style="height: 100px;">
			</view>
		</view>
		<view class="bottomTap">
			<view class="commentForm">
				<u--input customStyle="height: 25px;background: #F2F2F2;margin-top: 10px;margin-left: 16px;"
					placeholder="欢迎发表你的观点" prefixIcon="chat" prefixIconStyle="font-size: 24px;color: #909399"
					v-model="value">
				</u--input>
			</view>
			<view class="">
				<u-button text="发表" shape="circle" type="primary" :plain="false"
					customStyle="width: 80px;top: 13px;height:33px" @tap="publishComment">
				</u-button>
			</view>
		</view>
		<u-notify ref="uNotify" message="评论已发表"></u-notify>
	</view>
</template>

<script>
	import {
		getComment,
		getContent,
		getPostList,
		delCom,
		updatePost,
		addComment
	} from "@/utils/api.js"
	export default {
		data() {
			return {
				data: {},
				articleId: 0,
				isStar: false,
				commentList: {},
				value: '',
				name: '猪八戒'
			}
		},
		onLoad(option) {
			var id = option.id
			this.articleId = id
			getContent(id).then((res) => {
				this.data = res.data
				this.data.readCount += 1
				this.update()
			})
			getComment(id).then((res) => {
				this.commentList = res
				console.log(this.commentList)
			})

		},
		methods: {
			publishComment() {
				const currentTime = new Date()
				const month = currentTime.getMonth() + 1
				var data = {
					postId: this.articleId,
					content: this.value,
					author: "猪八戒",
					avatar: "https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/WechatIMG1.jpeg",
					time: currentTime.getFullYear() + '-' + month + '-' + currentTime.getDate()
				}
				console.log(data)
				addComment(data).then((res) => {
					console.log(res)
					this.value = ''
					this.$refs.uNotify.show({
						top: 0,
						type: 'success',
						color: '#fff',
						bgColor: '#73BD9C',
						message: '评论已发表',
						duration: 1000 * 3,
						fontSize: 18,
					})
					getComment(this.articleId).then((res) => {
						this.commentList = res
						console.log(this.commentList)
					})
				})
			},
			starClick() {
				this.isStar = !this.isStar
				var newPost = {
					id: this.data.id,
					star: this.data.star + 1
				}
				console.log(newPost)
				updatePost(newPost).then(res => {
					console.log(res)
				})
			},
			update() {
				var newPost = {
					id: this.data.id,
					readCount: this.data.readCount
				}
				console.log(newPost)
				updatePost(newPost).then(res => {
					console.log(res)
				})
			},
			deleteComment(id) {
				delCom(id).then((res) => {
					console.log(res)
					getComment(this.articleId).then((res) => {
						this.commentList = res
						console.log(this.commentList)
						this.$refs.uNotify.show({
							top: 0,
							type: 'success',
							color: '#fff',
							bgColor: '#e85a72',
							message: '评论已删除',
							duration: 1000 * 3,
							fontSize: 18,
						})
					})
				})
			}
		}
	}
</script>

<style>
	.v-title {
		width: 100%;
		height: auto;
	}

	.v-title-text {
		font-size: 24px;
		font-family: serif;
	}

	.bottomTap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		box-shadow: 5px 5px 10px 5px #f2f2f2;
		background-color: #ffffff;
		height: 70px;
		display: grid;
		grid-template-columns: 6fr 3fr;
	}
</style>
